<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>手机验证登录</title>
		<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div class="outer-container">
			<div class="left">
				<div class="logo-box">
					<a href="index.html">
						<img src="img/logo.svg" >
					</a>
				</div>
			</div>
			<div class="right">
				<h2 class="title">
					<a href="微信登录.html" class="link">微信登录</a>
					<a class="active">手机验证登录</a>
					<a href="密码登录.html" class="link">密码登录</a></h2>
				<form>
					<div class="item_box">
						<div class="input_box">
							<input type="tel" placeholder="请输入手机号码" autocomplete="off">
						</div>
					</div>
					<div class="item_box">
						<div class="item_left">
							<div class="input_box">
								<input type="tel" placeholder="请输入右侧图形验证码" autocomplete="off">
							</div>
						</div>
						<div class="item_right">
							<!-- 验证码 -->
							<div class="img_yzm"></div>
						</div>
					</div>
					<div class="item_box">
						<div class="item_left">
							<div class="input_box">
								<input type="tel" placeholder="请输入短信验证码" autocomplete="off">
							</div>
						</div>
						<div class="item_right">
							<button class="short" id="send_code">获取验证码</button>
						</div>
					</div>
					<button class="long">登录</button>
				</form>
				<div class="bottom_box middle_along">
					<!-- <div class="bottom_left">
						<a href="微信登录.html" class="wx">
							<i class="iconfont iconweixin"></i>
							微信登录
						</a>
					</div> -->
					<div class="bottom_right">
						<sapn>
							没有账号？
							<a href="注册.html">立即注册</a>
						</sapn>
					</div>
				</div>
			</div>
		</div>
		<div class="copyright">漂洋过海（厦门）科技股份有限公司版权所有    备案号：闽ICP备15012455号-1</div>
		<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
		<script>
			// 验证码主逻辑
			$(function(){
				let vBtn = $("#send_code")
				vBtn.click(function (e){
					e.preventDefault()
					let countdown = 59
					vBtn.attr("disabled", true)
					vBtn.text("重新发送(60)")
					let cd = setInterval(() => {
						console.log(countdown)
						if (countdown == 0) {
							vBtn.removeAttr("disabled") 
							vBtn.text("获取验证码")
							clearInterval(cd)
						} else { 
							vBtn.attr("disabled", true)
							vBtn.text("重新发送(" + countdown + ")")
							countdown --
						} 
					}, 1000) //每1000毫秒执行一次
					
				});
			})
			
			
		</script>
	</body>
</html>
